<template>
  <TopNav title="营养计划"/>
  <!--添加-->
  <el-dialog
      draggable
      destroy-on-close
      v-model="dialogAddVisible"
      title="添加"
      width="80%"
      center>
    <el-form inline :model="addFormInfo" label-width="100px">
      <el-form-item label="营养配方类型">
        <el-input v-model="addFormInfo.formulaType"></el-input>
      </el-form-item>
      <el-form-item label="每日供给量（毫升）">
        <el-input v-model="addFormInfo.volume"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogAddVisible = false">取消</el-button>
                <el-button type="primary" @click="sureHandler">确定</el-button>
            </span>
    </template>
  </el-dialog>
  <!--编辑-->
  <el-dialog
      draggable
      destroy-on-close
      v-model="dialogEditorVisible"
      title="编辑"
      width="80%"
      center>
    <el-form inline :model="editorFormInfo" label-width="100px">
      <el-form-item label="营养配方类型">
        <el-input v-model="editorFormInfo.formulaType"></el-input>
      </el-form-item>
      <el-form-item label="每日供给量（毫升）">
        <el-input v-model="editorFormInfo.volume"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogEditorVisible = false">取消</el-button>
                <el-button type="primary" @click="sureEditorHandler">确定</el-button>
            </span>
    </template>
  </el-dialog>
  <div class="plan-list">
    <el-card class="plan-item" v-for="(item,index) in dataList.list" :key="index">
      <div class="icon-list">
        <el-icon class="icon" @click="addHander"><Plus /></el-icon>
        <el-icon class="icon" @click="handleEdit(item.enteralNutritionPlanId)"><EditPen /></el-icon>
        <el-icon class="icon" @click="handleDelete(item.enteralNutritionPlanId)"><CloseBold /></el-icon></div>
      <div class="title">{{ item.formulaType }}</div>
      <p><span>每日供给量（毫升）:</span>{{ item.volume }}</p>
    </el-card>
  </div>
</template>

<script setup>
import patientAxios from "@/api/patient.js"
import {useDataStore} from "@/stores/dataStore.js";
import {useRoute, useRouter} from 'vue-router'
import TopNav from "@/components/TopNav/Back.vue"
import {onMounted, reactive, ref} from "vue";

const route = useRoute()
//route.params.name;
const router = useRouter()
const dataStore = useDataStore()
//初始化分页查询数据
const dataList = reactive({
  list: []
})
//初始化总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(10)
//搜索初始化状态
const searchInfo = ref("")
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({
  formulaType: "",
  volume: "",
  nutritionPlanId: route.params.name,
})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  enteralNutritionPlanId: '',
  formulaType: "",
  volume: "",
  nutritionPlanId: "",
})
/**
 * 网路请求：分页查询
 *  */
const http = () => {
  patientAxios.enteralNutritionPlan_searchByNutritionPlanId({
    nutritionPlanId: route.params.name,
    search: searchInfo.value,
    page: currentPage.value,
    size: defaultPageSize.value
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
onMounted(() => {
  http()
})
/**
 * 分页
 */
const currentChangeHaddler = (nowPage) => {
  currentPage.value = nowPage
  http()
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http()
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  patientAxios.enteralNutritionPlan_add({
    formulaType: addFormInfo.formulaType,
    volume: addFormInfo.volume,
    nutritionPlanId: addFormInfo.nutritionPlanId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      http()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (id) => {

  dialogEditorVisible.value = true
  patientAxios.enteralNutritionPlan_findById({
    enteralNutritionPlanId: id
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.enteralNutritionPlanId = res.data.data.enteralNutritionPlanId;
      editorFormInfo.formulaType = res.data.data.formulaType;
      editorFormInfo.volume = res.data.data.volume;
      editorFormInfo.nutritionPlanId = res.data.data.nutritionPlanId;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  patientAxios.enteralNutritionPlan_update({
    enteralNutritionPlanId: editorFormInfo.enteralNutritionPlanId,
    formulaType: editorFormInfo.formulaType,
    volume: editorFormInfo.volume,
    nutritionPlanId: editorFormInfo.nutritionPlanId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http()
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**删除 */
const handleDelete = (id) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    patientAxios.enteralNutritionPlan_delete({
      enteralNutritionPlanId: id
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功！！！",
        })
        http()
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })
}
</script>

<style scoped lang="scss">
.plan-list {
  .plan-item {
    margin: 20px;

    .icon-list{
      position: fixed;
      right: 40px;
      display: flex;
      .icon{
        margin: 10px;
      }
      .icon:hover{
        color: red;
      }
    }
    .title {
      font-weight: bolder;
      margin-bottom: 20px;
      font-size: 20px;
    }

    p {

      margin: 7px;

      span {
        margin-right: 10px;
        opacity: .8;
      }
    }
  }
  .button-list{

    .button{
      margin: 10px;
      width:80%;
    }
  }
}
</style>
